<script setup>
import { ref, reactive, computed, provide } from 'vue'
import useAjax from '@/core/hooks/useRequest'
import useTableBarEvent from '@/core/hooks/useTableBarEvent'
import TableActionBar from '@/components/TableActionBar.vue'
import { TreeCleanEmptyNode } from '@/core/utils/Common'
import { NormalStateColors } from '@/core/config/ColorMap'
import categoryApi from '@/api/goods/CategoryApi'

// 查看、编辑组件模块
import CategoryForm from './CategoryForm.vue'
import CategoryView from './CategoryView.vue'

// 表单的ref
const editorForm = ref(null)  // 编辑表单
const previewForm = ref(null) // 预览表单
const selectedKeys= ref([])   // 列表选中KEY
//
const state = reactive({
  expandKeys: [] // 展开的ROWID
})
const {
  run,
  refresh,
  loading,
  data
} = useAjax(categoryApi.getListData)

const dataSource = computed(() => {
  const treeData = data.value?.data || []
  TreeCleanEmptyNode(treeData)
  return treeData
} )
// 表格行选项事件
const rowSelection = {
  onChange: (selectedRowKeys) => {  selectedKeys.value = selectedRowKeys },
  getCheckboxProps: record => { return { disabled: record.state?.value==9 }}
}

// 表格头动作
const options = reactive({
  pageAction: {refresh, run }, 
  editor: computed(() => editorForm.value),  // 编辑器
  viewer: computed(()=> previewForm.value),  // 查看器
  selectedKeys: computed(() => selectedKeys.value), // 选中的数据的KEY集
  deleteService: categoryApi.removeData, //api服务 - 册除
  confirmService: categoryApi.activeData, //api服务 - 审核 - 激活
})
const { AllEvent , viewEvent, editEvent } = useTableBarEvent(options)

// 定义列表字段
const columns = [
  { title: '名称', dataIndex: 'name' },
  { title: '缩图', dataIndex: 'thumb' },
  { title: '关键字', dataIndex: 'keywords' },
  { title: '备注', dataIndex: 'notes' },
  { title: '排序', dataIndex: 'idx' },
  { title: '状态', dataIndex: 'state', width: '60px' },
  { title: '创建时间/人', dataIndex: 'createOn', width: '210px' },
  { title: '操作', dataIndex: 'operation',  fixed: 'right',  width: '100px'  }
]
// 
const expandAll=()=>{
  if(state.expandKeys.length >0){
    state.expandKeys = []
  }else{
    dataSource.value.forEach(item=>{
      state.expandKeys.push(item.id)
    })
  }
}
// 刷新数据-调用refresh方法
provide('refreshData', refresh )
// 刷新页面-调用run方法
provide('refreshPage', run )
</script>
<template>
  <a-row :gutter="[16,16]">
    <a-col :span="24">
      <!-- 数据列表-->
      <a-table
        v-model:expanded-row-keys="state.expandKeys"
        :columns="columns" 
        :loading="loading"
        :data-source="dataSource"
        :row-selection="rowSelection"
        :pagination="false"
        :row-key="record=>record.id">
        <!-- 标题 搜索工具栏 -->
        <template #title>
          <table-action-bar
            :actions="['refresh', 'add', 'edit', 'delete', 'confirm']"
            :on-refresh="refresh"
            :all-event="AllEvent"
            :on-search="run" />
        </template>
        <!-- 头部 -->
        <template #headerCell="{ column }">
          <template v-if="column.dataIndex === 'name'">
            <span>
              <swap-outlined color="#f50" @click="expandAll" />
              {{ column.title }}
            </span>
          </template>
        </template>
        <!-- 字段 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="dashed" title="查看" @click="viewEvent(record.id)">
              <template #icon><file-search-outlined /></template>
            </a-button>
            <a-button type="dashed" title="编辑" @click="editEvent(record.id)">
              <template #icon><edit-outlined /></template>
            </a-button>
          </template>
          <!-- 图标 -->
          <template v-else-if="column.dataIndex === 'thumb'">
            <a-image :width="50" :src="record.thumb" />
          </template>
          <!-- 操作 -->
          <template v-else-if="column.dataIndex === 'acts'">
            <a-tag v-for="it in record.acts" :key="it" color="pink">{{ it.label }}</a-tag>
          </template>
          <!-- 状态 -->
          <template v-else-if="column.dataIndex === 'state'">
            <a-tag :color="NormalStateColors[record.state?.value]">{{ record.state?.label }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'createOn'">
            {{ record.createBy }}<br>
            {{ record.createOn }}
          </template>
        </template>
      </a-table>
      <!-- 编辑-表单 -->
      <category-form ref="editorForm" />
      <!-- 预览-表单 -->
      <category-view ref="previewForm" />
    </a-col>
  </a-row>
</template>
